<template>
  <l-content :app="app">
    <el-row :gutter="20">
      <el-col :span="6">
        <section class="border space-p bg-extra-light-blue">
          <el-input placeholder="请输入关键字" class="space-m-b" v-model="filterText">
            <div slot="suffix" class="el-input__icon" >
              <i class="el-icon-search"></i>
            </div>
          </el-input>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :default-expand-all="true"
            highlight-current
            ref="tree"
            :indent="16"
            class="noborder bg-transparent scroll-bar"
            @node-click="handleNodeClick">
          </el-tree>
        </section>
      </el-col>
      <el-col :span="18">
        <el-form size="mini" :inline="true" :model="searchForm" onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
          <el-form-item class="pull-right">
            <el-input
              placeholder="请输入菜单名"
              v-model="searchForm.name">
              <div slot="suffix" class="el-input__icon" >
                <el-button size="mini" type="text" @click="onSearch">
                  <i class="el-icon-search"></i>
                </el-button>
              </div>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="plus" @click="onAdd">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="onDeleteBatch" :disabled="!canDeleteBatch"><i class="el-icon-delete"></i>&nbsp;批量删除</el-button>
          </el-form-item>
        </el-form>
        <c-page-table
          :data="tableData"
          @size-change="handleSizeChange"
          @sort-change="handleSortChange"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
          :loading="loading">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="sortNo"
            label="序号"
            sortable='sortNo'
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="菜单名"
            sortable='name'
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="code"
            label="CODE"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="parentName"
            label="父菜单"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="url"
            label="URL"
            min-width="150">
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </c-page-table>
      </el-col>
    </el-row>
    <component :is="dialog" :data="dialogData" @ok="handleOk(tableData.page)" @close="dialog = ''"/>
  </l-content>
</template>

<script>
import SDialogAdd from './comps/ResourceManager/SDialogAdd'
import SDialogEdit from './comps/ResourceManager/SDialogEdit'
// 用于查询的参数
const paramForm = {}
export default {
  name: 'ResourceManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd,
    SDialogEdit
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      searchForm: {
        name: '',
        parentId: '0'
      },
      defaultProps: {
        children: 'nodes',
        label: 'text'
      },
      treeData: [],
      dialog: '',
      filterText: '',
      dialogData: {},
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.getTreeData()
    this.handleCurrentChange(1)
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    getTreeData () {
      this.$service.system.queryResourceTree().then(response => {
        this.treeData = response.data
      })
    },
    filterNode (value, data) {
      if (!value) {
        return true
      }
      return data.text.indexOf(value) !== -1
    },
    handleNodeClick (data) {
      this.searchForm.parentId = data.id
      this.onSearch()
    },
    onSearch () {
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // 把searchForm里面的值覆盖到paramForm里面去
        Object.assign(paramForm, this.searchForm)
        // this.pageSize 获取当前每页显示数量,
        this.$service.system.queryResourcePage(currentPage, this.pageSize, paramForm).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    },
    handleEdit (row) {
      this.dialogData = row
      this.dialog = 'SDialogEdit'
    },
    handleDelete (row) {
      this.$confirm('确定删除此菜单及其子菜单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
        this.$service.system.delResource(row.id).then(() => {
          this.getTreeData()
          this.handleCurrentChange(this.tableData.page)
        })
      }).catch(() => {
      })
    },
    onAdd () {
      this.dialog = 'SDialogAdd'
      this.dialogData = {
        parentId: this.searchForm.parentId
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onDeleteBatch (btn) {
      if (this.multipleSelection.length > 0) {
        this.$confirm('确定删除选中菜单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          const ids = []
          for (let i = 0; i < this.multipleSelection.length; i++) {
            ids.push(this.multipleSelection[i].id)
          }
          this.$service.system.batchDeleteResource(ids).then(() => {
            this.getTreeData()
            this.handleCurrentChange(this.tableData.page)
          })
        }).catch(() => {
        })
      } else {
        this.$message({
          message: '没有选中项',
          type: 'warning'
        })
      }
    },
    handleOk (currentPage) {
      this.handleCurrentChange(currentPage)
      this.getTreeData()
    }
  }
}
</script>

<style scoped="scoped">
  .scroll-bar {
    max-height: 500px;
    overflow: auto;
  }
</style>
